<style lang="css" scoped>
	.ivu-modal{
		height:700px;
		overflow: hidden;
	}
</style>
<template>
  <div>
    <Card>
			<p slot="title" style="height: 32px">
				<Button type="primary" @click="alertAdd">新增</Button>
			</p>			
      <tables border ref="tables" editable search-place="top" v-model="tableData" :columns="columns" @on-delete="handleDelete" />
    </Card>
		<Modal v-model="modelshow" width="900" :styles="{top: '30px',height:'80%',overflow: 'hidden',overflowY:'scroll'}"  @on-visible-change="doCancel"  @on-ok="onClickOk">
			<p slot="header" style="color:#2d8cf0;">
				<Icon type="information-circled"></Icon>
				<span>新增投票设置</span>
			</p>			
			<Form ref="myForm" :model="formItems" :label-width="90">
				<FormItem label="类型" :label-width="100"> 
					<Select clearable style="width:100px">
						<Option :value="1">微信</Option>
						<Option :value="2">APP</Option>
					</Select>				
				</FormItem>															
		
				<FormItem label="模板选择" :label-width="100"> 
					<Select clearable style="width:100px">
						<Option :value="1">模板1</Option>
						<Option :value="2">模板2</Option>
						<Option :value="3">模板3</Option>
						<Option :value="4">模板4</Option>
					</Select>							
				</FormItem>														
				<FormItem label="活动标题" prop="title">
					<Input v-model="formItems.title" placeholder="请输入活动标题"></Input>
				</FormItem>	
				<FormItem label="广告图片" prop="adimg">
					<Input v-model="formItems.adimg" placeholder="请输入广告图片"></Input>
				</FormItem>	
				<FormItem label="每个用户可投票数（为0不限）" prop="everyonevote">
					<Input-number v-model="everyonevote"></Input-number>
				</FormItem>	
				<FormItem label="每个用户每天可投票数（为0不限）" prop="everyonedayvote">
					<Input-number v-model="everyonedayvote"></Input-number>
				</FormItem>			
				<FormItem label="同一个IP下每天可投票数（为0不限）" prop="everyipdayvote">
					<Input-number v-model="everyipdayvote"></Input-number>
				</FormItem>		
				<FormItem label="报名开始时间" :label-width="90" prop="applystarttime">
					<DatePicker type="date" v-model="formItems.applystarttime" style="width: 200px"></DatePicker>
				</FormItem>		
				<FormItem label="报名结束时间" :label-width="90" prop="applyendtime">
					<DatePicker type="date" v-model="formItems.applyendtime" style="width: 200px"></DatePicker>
				</FormItem>		
				<FormItem label="投票开始时间" :label-width="90" prop="votestarttime">
					<DatePicker type="date" v-model="formItems.votestarttime" style="width: 200px"></DatePicker>
				</FormItem>		
				<FormItem label="投票结束时间" :label-width="90" prop="voteendtime">
					<DatePicker type="date" v-model="formItems.voteendtime" style="width: 200px"></DatePicker>
				</FormItem>
				<FormItem label="投票标题1" prop="votetitle1">
					<Input v-model="formItems.votetitle1" placeholder="投票标题1"></Input>
				</FormItem>		
				<FormItem label="活动介绍1" prop="votecontent1">
					<Input v-model="formItems.votecontent1" type="textarea" placeholder="请输入..."></Input>
				</FormItem>	
				<FormItem label="投票标题2" prop="votetitle2">
					<Input v-model="formItems.votetitle2" placeholder="投票标题2"></Input>
				</FormItem>		
				<FormItem label="活动介绍2" prop="votecontent2">
					<Input v-model="formItems.votecontent2" type="textarea" placeholder="请输入..."></Input>
				</FormItem>	
				<FormItem label="投票标题3" prop="votetitle3">
					<Input v-model="formItems.votetitle3" placeholder="投票标题3"></Input>
				</FormItem>		
				<FormItem label="活动介绍3" prop="votecontent3">
					<Input v-model="formItems.votecontent3" type="textarea" placeholder="请输入..."></Input>
				</FormItem>	
				<FormItem label="虚拟浏览量" prop="xn_views">
					<Input-number v-model="xn_views"></Input-number>
				</FormItem>		
				<FormItem label="虚拟投票量" prop="xn_vote">
					<Input-number v-model="xn_vote"></Input-number>
				</FormItem>		
				<FormItem label="虚拟报名数" prop="xn_apply">
					<Input-number v-model="xn_apply"></Input-number>
				</FormItem>	
				<FormItem label="是否需要审核" :label-width="100"> 
					<Select clearable style="width:100px">
						<Option :value="1">是</Option>
						<Option :value="2">否</Option>
					</Select>				
				</FormItem>	
				<FormItem label="自动锁定规则" prop="lock_min">
					当<Input-number v-model="lock_min"></Input-number>分钟的投票数量超过<Input-number v-model="lock_vote"></Input-number>票时自动锁定选手。
				</FormItem>		
				<FormItem label="自动锁定规则" prop="lock_vote" style="display:none">
				</FormItem>																										
			</Form>	
		</Modal>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { getTableData } from '@/api/data'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        {title: '名称', key: 'name', sortable: false, align: 'center'},
        {title: '排序', key: 'sort', sortable: false, align: 'center'},
        {
          title: '操作',
          key: 'handle',
		  align: 'center',
          button: [
            (h, params, vm) => {
				return h('Button', {
					props: {
							type: 'primary'
					},
					on: {
						click: () => {
							console.log(params);
							this.formItems = this.tableData[params.index];
							this.modelshow = true;
						}
					}
				}, '编辑')							
            },
            (h, params, vm) => {
				return h('Button', {
						props: {
								type: 'error'
						},
						style: {
							marginLeft:'10px'
						},						
						on: {
							click: () => {								
								this.tableData.splice(params.index,1);
							}
						}
				}, '删除')							
            } 
          ]
        }
      ],
      tableData: [],
			modelshow:false,
			formItems: {
				name:'',
				sex:'男',
				age:0,
				mobile:'',
				parentName:'',
				parentsex:'男',
				parentage:0,
				childName:'',
				childsex:'男',
				childage:0,
				rztime:''
			},
			clickType:'edit',
			sexArr:{man:'男',woman:'女'}
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    },
		doCancel (data) {
			console.log(222333);
		},
		alertAdd () {
			// this.formItems = {};
			// this.modelshow = true;		
			// this.clickType = 'add';
			this.$router.push({
				name:'voteadd'				
			});
		},
		onClickOk () {
			console.log(this.formItems);
			if (this.clickType == 'add') {
				this.tableData.push(this.formItems);
			}
			console.log(this.tableData);
		}
  },
  mounted () {
		this.tableData = this.levelData
  }
}
</script>

<style>

</style>
